<%--
  Created by IntelliJ IDEA.
  User: reeveslee
  Date: 16/5/20
  Time: 下午10:47
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <link rel="icon" sizes="192x192" href="http://img.kuibutech.com/kbApp_fixedImage/favcion.jpg">
    <link rel="stylesheet" href="http://www.kuibutech.com/kuibuversion1/css/entry/bin/entry.css"/>

    <script src="http://www.kuibutech.com/kuibuversion1/js/jquery-1.8.3.min.js"></script>
    <!-- 集成Sweet Alert插件 -->
    <link rel="stylesheet" type="text/css" href="http://www.kuibutech.com/kuibuversion1/css/sweetalert.css">
    <script src="http://www.kuibutech.com/kuibuversion1/js/sweetalert.min.js"></script>
    <script src="http://www.kuibutech.com/kuibuversion1/js/matchDevice.js"></script>
    <title>跬步话题分享</title>
    <style>
        .card {
            border-radius: 3%;
            background-color: #F6F6F6;
            overflow: auto
        }

        .card .left {
            float: left;
            width: 17%;
            margin-top: 20px;
        }

        .card .left .head {
            overflow: hidden;
            width: 40px;
            height: 40px;
            margin-left: auto;
            margin-right: auto;
            overflow: hidden;
            border-radius: 50%
        }

        .card .right {
            float: left;
            width: 83%;
            margin-top: 15px;
        }

        .card .right .name {
            height: 16px;
            width: 95%;
            margin-right: 5%
        }

        .card .right .time {
            margin-right: 10%;
            font-size: 14px;
            color: #CCC;
        }

        .card .right .com {
            margin-right: 10%;
            clear: both;
            line-height: 1.4;
        }

        .tag {
            background-color: #FFD246;
            color: #FEFFFE;
            padding: 3px;
        }
    </style>
    <script>
        $(document).ready(function (data) {
            var url = location.href.split('?')[0];
            var strings = url.split('/');
            var topicId = strings[strings.length - 1];
            // var topicId = 11;
            $.get("http://www.kuibutech.com/kuibuversion1/topic/feed/-1/" + topicId + "/0", {}, function (data) {

                $("#imgUrl").attr("src", data.img)
                $("#title").append(data.title);
                $("#secondary").append(data.secondary);
                var appendStr = '<div class="left" style="margin-top:20px;"><div class="head"><img src="' + data.sponsor.photo + '" width="100%"></div></div> <div class="right"><div class="name"><div style="width: 70%;float: left"><span >' + data.sponsor.name + '</span></div><div style="width: 30%;float: left;margin-top:0"><span class="tag">发起人</span></div></div><div class="com" style="margin-bottom: 10px">' + data.sponsor.descri + '</div> </div>';
                $("#sponsor").append(appendStr);
                if (data.invite != null) {
                    if (data.invite.voice != null) {
                        var appendStr2 = '<div class="left" style="margin-top:20px;"><div class="head"><img src="' + data.invite.photo + '" width="100%"></div></div> <div class="right"><div class="name"><div style="width: 70%;float: left"><span>' + data.invite.name + '</span></div><div style="width: 30%;float: left;margin-top:0"><span class="tag">推荐</span></div></div><div class="com"><audio controls="controls" style="width: 90%;"><source src="' + data.invite.voice.src + '" type="audio/mp3"></audio></div><div class="time"><span>' + data.invite.time + '</span><div style="float: right;margin-top: 0"><span><img src="http://kuibutech.oss-cn-shanghai.aliyuncs.com/kbApp_fixedImage/topicpraise.png" width="18px"></span><span>&nbsp;' + data.invite.praise + '</span></div></div></div>'
                    } else {
                        var divImgs = ""
                        for (var j = 0; j < data.invite.image.length; j++) {
                            divImgs = divImgs + '<div style="width: 100%;margin: auto auto"><img width="100%" src="' + data.invite.image[j] + '"> </div>';
                        }
                        var appendStr2 = '<div class="left" style="margin-top:20px;"><div class="head"><img src="' + data.invite.photo + '" width="100%"></div></div> <div class="right"><div class="name"><div style="width: 80%;float: left"><span>' + data.invite.name + '</span></div><div style="width: 20%;float: left;margin-top:0"><span class="tag">推荐</span></div></div><div class="com">' + data.invite.text + '</div><div class="time"><span>' + data.invite.time + '</span><div style="float: right;margin-top: 0"><span><img src="http://kuibutech.oss-cn-shanghai.aliyuncs.com/kbApp_fixedImage/topicpraise.png" width="18px"></span><span>&nbsp;' + data.invite.praise + '</span></div></div></div>'
                    }
                }

                $("#recom").append(appendStr2);

            });
            $.get("http://www.kuibutech.com/kuibuversion1/topic/newFeed/" + topicId + "/0", {}, function (data) {
                var info = "共" + data.feedCount + "条评论，" + data.userCount + "人参与";
                $("#info").append(info);
                var recordlist = eval(data.feeds);
                for (var i = 0; i < recordlist.length; i++) {
                    if (recordlist[i].voice != null) {
                        var appendStr = '<div class="card"><div class="left" style="margin-top:20px;"><div class="head"><img src="' + recordlist[i].photo + '" width="100%"></div></div><div class="right"><div class="name"><div style="width: 80%;float: left"><span>' + recordlist[i].name + '</span></div></div> <div class="com"><audio controls="controls" style="width: 90%;"><source src="' + recordlist[i].voice.src + '" type="audio/mp3"></audio></div><div class="time"><span>' + recordlist[i].time + '</span><div style="float: right;margin-top: 0"><span><img src="http://kuibutech.oss-cn-shanghai.aliyuncs.com/kbApp_fixedImage/topiccomment.png" width="18px"> </span><span >&nbsp;' + recordlist[i].praise + '&nbsp;&nbsp;&nbsp;&nbsp;</span><span><img src="http://kuibutech.oss-cn-shanghai.aliyuncs.com/kbApp_fixedImage/topicpraise.png" width="18px"></span><span>&nbsp;' + recordlist[i].reply + '</span></div></div></div></div>';
                    } else {
                        var divImgs = ""
                        for (var j = 0; j < recordlist[i].image.length; j++) {
                            divImgs = divImgs + '<div style="width: 100%;margin: auto auto"><img width="100%" src="' + recordlist[i].image[j] + '"> </div>';
                        }
                        var appendStr = '<div class="card"><div class="left" style="margin-top:20px;"><div class="head"><img src="' + recordlist[i].photo + '" width="100%"></div></div><div class="right"><div class="name"><div style="width: 80%;float: left"><span>' + recordlist[i].name + '</span></div></div> <div class="com">' + recordlist[i].text + divImgs + '</div><div class="time"><span>' + recordlist[i].time + '</span><div style="float: right;margin-top: 0"><span><img src="http://kuibutech.oss-cn-shanghai.aliyuncs.com/kbApp_fixedImage/topiccomment.png" width="18px"> </span><span >&nbsp;' + recordlist[i].praise + '&nbsp;&nbsp;&nbsp;&nbsp;</span><span><img src="http://kuibutech.oss-cn-shanghai.aliyuncs.com/kbApp_fixedImage/topicpraise.png" width="18px"></span><span>&nbsp;' + recordlist[i].reply + '</span></div></div></div></div>';
                    }

                    $("#content").append(appendStr)
                }
            });

            if (browserRedirect() == 0 || browserRedirect() == 1) {
                $("#download").show();
                $("#close").on("click", function () {
                    $("#download").hide();
                })
            }
        });
    </script>
</head>
<body style="background-color: #EEE">

<div style="position:relative;margin-left:auto;margin-right:auto;max-width:640px;">
    <div style="position:absolute;margin-left:auto;margin-right:auto;max-width:640px;"><img
            src="http://kuibutech.oss-cn-shanghai.aliyuncs.com/kbApp_fixedImage/topicshadow.png" width=100%></div>
    <div style="position:absolute;z-index: 2;width:80%;margin-left:10%;max-width:640px;top: 60px">
        <div id="title" style="color:#FFFFFF;font-size: 20px;line-height: 24px"></div>
        <br><br>
        <div id="secondary" style="color:#FFFFFF;font-size: 15px;line-height: 18px"></div>
    </div>
    <img id="imgUrl" width=100%>
    <!--这里是标题大图的URL-->
</div>
<div id="content" class="entry">

    <div class="card" id="sponsor">

    </div>

    <div class="card" id="recom">

    </div>
    <div id="info" style="height: 20px;margin-top: 0;font-size: 14px;color:#CCC; ">
    </div>

</div>

<div style="width: 100%;height: 80px;"></div>

<div id="download" hidden style="position:fixed;bottom:0px;width:100%;">
    <div id="close"
         style="position:absolute; border: 0px solid red;height: 30px;width: 30px;margin-left: 1%;margin-top: 15px"></div>
    <div style="position:absolute; border: 0px solid red;height: 30px;width: 50px;margin-left: 80%;margin-top: 15px"
         onclick="redirect()"></div>
    <img style="width:100%;" src="http://www.kuibutech.com/kuibuversion1/img/app/appdownload.jpg"/>
</div>

<!--设置下载框链接为打开或者下载，ios和安卓不同地址-->
<script>
    var loadIframe = null;
    function createIframe() {
        var iframe = document.createElement("iframe");
        iframe.style.cssText = "display:none;width:0px;height:0px;";
        document.body.appendChild(iframe);
        loadIframe = iframe;
    }

    function is_weixn() {
        var ua = navigator.userAgent.toLowerCase();
        if (ua.match(/MicroMessenger/i) == "micromessenger") {
            return true;
        } else {
            return false;
        }
    }

    function redirect(event) {

        if (is_weixn()) {
            swal({
                title: "",
                text: "链接打不开? 点击右上角选择<br/><img style='width: 30px;height: 15px;margin-left: 0%;' src='http://img.kuibutech.com/kbApp_fixedImage/wxopensafari.png'><span style=\"color:red\">\"在浏览器中打开\"<span>",
                html: true,
                allowOutsideClick: true,
                showConfirmButton: false
            });
            event.stopImmediatePropagation();
        }

        loadIframe.src = "kuibu://";
        var t = Date.now();
        setTimeout(function () {
            if (Date.now() - t < 1600) {
                if (browserRedirect() == 0) {
                    location.href = "http://www.kuibutech.com/kuibuversion1/version1_3/downloadFromPage/0/471";
                } else if (browserRedirect() == 1) {
                    location.href = "http://www.kuibutech.com/kuibuversion1/version1_3/downloadFromPage/1/471";
                } else {
                    location.href = "http://www.kuibutech.com";
                }
            }
        }, 1500)
    }
    createIframe();
</script>
</body>
</html>

